var $img_box = $(".img_box"),
    $box = $(".box"),
    $dot = $(".dot");

var index = 1,   //第几张图，默认为1
    timer = null;  //定时器


//点击左右按钮
$(".leftBtn").click(function () {
    change(index - 1);
});

$(".rightBtn").click(function () {
    change(index + 1);
});

//圆点处理
$dot.click(function () {
    change($(this).index() + 1)
});

//轮播定时，3秒
timer = setInterval(function(){
    change( index + 1)
},3000);

//鼠标移到圆点去除定时器，移出去恢复
$box.hover(function(){
    clearInterval(timer);
},function () {
    timer = setInterval(function () {
        change( index + 1);
    },3000);
});

/**
 * 
 * @param {当前第几张图 } crrIndex 
 */
function change(crrIndex) {

    if (crrIndex < 1) {
        index = 5;
    } else if (crrIndex > 5) {
        index = 1;
    } else {
        index = crrIndex;
    }

    //stop()停止动画
    //animate() 方法执行 CSS 属性集的自定义动画
    $img_box.stop(true,true).animate({
        "margin-left": crrIndex * -800
    }, 1000, function () {
        if (crrIndex > 5) {
            $img_box.css("margin-left", -800);
        } else if (crrIndex < 1) {
            $img_box.css("margin-left", -800 * 5);
        }
    });

    //移除原有的active并给当前圆点添加active
    $dot.removeClass("active").eq(index - 1).addClass("active");
}
